<template>
  <div id="container"></div>
</template>
<script>
import 'echarts-wordcloud'
export default {
  mounted() {
    const data = [
      {
        name: '标题',
        value: 100
      },
      {
        name: '标题2',
        value: 200
      },
      {
        name: '标题3',
        value: 300
      },
      {
        name: '标题4',
        value: 400
      },
      {
        name: '标题5',
        value: 500
      }
    ]
    const chart = this.$echarts.init(document.getElementById('container'))
    chart.setOption({
      series: [
        {
          type: 'wordCloud',
          data,
          textStyle: {
            normal: {
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              color: function () {
                return (
                  'rgb(' +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(',') +
                  ')'
                )
              }
            },
            emphasis: {
              shadowColor: '#333',
              shadowBlur: 10
            }
          }
          // shape: 'circle'
        }
      ]
    })
  }
}
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
}
</style>
